import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import { RtBadge } from './st';
import { Tip } from 'sui';

/* icon button with tooltip
 * start waiting when click
 *
 * if hcmd is empty, return null
 *
 * click: hcmd(uid)
 *     when finish job, call fDone to stop waiting
 *
 * title: tooltip text
 * cfm: if cfm not empty, pop confirm window before call hcmd(uid)
 * wait: waiting or not after click
*/
const CmdItem = ({ hcmd, icon, title, uid, id, cfm, pos="bottom", disabled }) => {
    if (!hcmd) {
        return null;
    }

    const handleCmd = (v) => {
        if (cfm) {
            if (window.confirm(cfm)) {
                hcmd(v);
            }
        }
        else {
            hcmd(v);
        }
    };

    return (
        <Tip title={title} pos={pos}>
            <IconButton onClick={() => handleCmd(uid)} id={id} disabled={disabled}>
                {icon}
            </IconButton>
        </Tip>
    );
};

/* icon button with tooltip and num badge
 * start waiting when click, never stop waiting
 *
 * if hcmd is empty, return null
 *
 * click: hcmd(uid)
 *
 * title: tooltip text
*/
const LinkItem = ({ hcmd, icon, title, num, uid, pid="btlink", disabled }) => <CmdItem
    title={title}
    disabled={disabled}
    icon={
        <RtBadge
            overlap="rectangular"
            className="p-1"
            max={9999}
            showZero
            color="primary"
            badgeContent={num || 0}>
            {icon}
        </RtBadge>

    }
    hcmd={hcmd ? (v, fn) => hcmd(v) : null}
    uid={uid}
    id={pid + uid}/>;

export {CmdItem, LinkItem};
